﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <link href="../css/footable-0.1.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .footable-row-detail-inner ul {
            padding: 0 20px;
            margin: 0;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="../js/footable.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.toc').click(function() {
                $('table').footable();
            });
        });
    </script>
</head>
<body>
<img src="img/footable.png" />
<p>Use FooTable to create a cool looking "table of contents" widget.</p>
<p><a class="toc" href="#">Apply FooTable</a></p>
<div style="width:320px">
    <table class="footable">
        <thead>
        <tr>
            <th data-class="expand">
                Chapter
            </th>
            <th data-hide="all" data-name=" ">
                Sections
            </th>
        </tr>
        </thead>
        <tbody data-init="show">
        <tr>
            <td>Getting Started</td>
            <td>
                <ul>
                    <li>Your First FooTable</li>
                    <li>Options</li>
                    <li>Configuration via Data Attributes</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Sorting Plugin</td>
            <td>
                <ul>
                    <li>How to setup</li>
                    <li>Sorting Options</li>
                    <li>Data Attributes</li>
                    <li>Styling</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Extend FooTable</td>
            <td>
                <ul>
                    <li>Sorting</li>
                    <li>Filtering</li>
                    <li>Pagination</li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
